<template>
  <div class="content">
    <div class="scroll-view-box" v-loading="submitBtn">
      <el-form label-width="120px" :inline="true" :model="formData" :rules="addRules" ref="addRules"
        label-position="top">
        <el-form-item label="合作状态" prop="interact_status">
          <div class="input-width">
            <el-radio-group v-model="formData.interact_status">
              <el-radio :label="1">合作中</el-radio>
              <el-radio :label="2">已停止</el-radio>
            </el-radio-group>
          </div>
        </el-form-item>
        <el-form-item label="产品大类" prop="product_type_id">
          <el-select filterable v-model="formData.product_type_id" placeholder="选择产品大类" clearable class="input-width">
            <el-option v-for="item in productType" :key="item.Id" :label="item.product_type_name" :value="item.Id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="往来账户" prop="account_id">
          <el-select filterable v-model="formData.account_id" placeholder="选择往来账户" clearable class="input-width">
            <el-option v-for="item in receiveList" :key="item.id" :label="item.account_name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="法人名称" prop="corporation">
          <el-input v-model="formData.corporation" placeholder="输入法人名称" clearable class="input-width"></el-input>
        </el-form-item>
        <el-form-item label="法人联系电话" prop="corporation_number">
          <el-input v-input-limit="2" v-model="formData.corporation_number" placeholder="输入法人联系电话" clearable
            class="input-width"></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="contacts">
          <el-input v-model="formData.contacts" placeholder="输入联系人" clearable class="input-width"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="contacts_number">
          <el-input v-input-limit="2" v-model="formData.contacts_number" placeholder="输入联系电话" clearable
            class="input-width"></el-input>
        </el-form-item>
        <el-form-item label="供应商名称" prop="supplier_name">
          <el-input v-model="formData.supplier_name" placeholder="输入供应商名称" clearable class="input-width"></el-input>
        </el-form-item>
        <el-form-item label="地址信息" prop="contacts_address">
          <el-input v-model="formData.contacts_address" placeholder="输入地址信息" clearable class="input-width"></el-input>
        </el-form-item>
        <el-form-item label="社会信用代码" prop="social_credit_code">
          <el-input v-model="formData.social_credit_code" placeholder="输入社会信用代码" clearable
            class="input-width"></el-input>
        </el-form-item>
        <el-form-item label="营业执照" prop="file_list">
          <div class="file-list-box">
            <div class="file-item-box" v-for="(item, index) in formData.file_list" :key="index">
              <div class="el-icon-delete-box" @click="delFileFunc(index)">
                <i class="el-icon-error"></i>
              </div>
              <el-tooltip class="item" effect="dark" :content="item.name" placement="top">
                <img class="img" :src="$fileImgFunc(item)" />
              </el-tooltip>
            </div>
            <el-upload accept="image/*" class="avatar-uploader" action="#" :show-file-list="false" :auto-upload="false"
              list-type="picture-card" :on-change="fileFunc">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveSubmit('addRules')" :loading="submitBtn">提交</el-button>
        <el-button @click="cancelFunc">关闭</el-button>
      </span>
    </div>
  </div>
</template>
<script>
import purchaseApi from "@/api/purchaseApi";
import companyApi from "@/api/companyApi";
import { Form } from 'element-ui';
var phoneRule = (rule, value, callback) => {
  if (!/^1\d{10}$/.test(value)) {
    return callback(new Error("请输入正确手机号"));
  } else {
    callback();
  }
};
var password = (rule, value, callback) => {
  if (!value) {
    return callback(new Error("密码不能为空"));
  } else if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/.test(value)) {
    callback(new Error("密码须8-16位,包含大小写字母、数字"));
  } else {
    callback();
  }
};
export default {
  name: 'addSupplier',
  data() {
    return {
      formData: {
        supplier_name: "",
        corporation: "",
        corporation_number: "",
        product_type_id: "",
        interact_status: 1,
        contacts: "",
        contacts_number: "",
        contacts_address: "",
        account_id: "",
        social_credit_code: '',
        file_list: [],
      },
      addRules: {
        supplier_name: [
          {
            required: true,
            message: "请输入供应商",
            trigger: "change",
          },
        ],
        corporation: [
          {
            required: true,
            message: "请输入法人名称",
            trigger: "change",
          },
        ],
        corporation_number: [
          {
            required: true,
            message: "请输入法人联系电话",
            trigger: "change",
          },
        ],
        product_type_id: [
          {
            required: true,
            message: "请选择产品大类",
            trigger: "change",
          },
        ],
        contacts: [
          {
            required: true,
            message: "请输入联系人",
            trigger: "change",
          },
        ],
        contacts_number: [
          {
            required: true,
            message: "请输入联系电话",
            trigger: "change",
          },
        ],
        contacts_address: [
          {
            required: true,
            message: "请输入联系地址",
            trigger: "change",
          },
        ],
        account_id: [
          {
            required: true,
            message: "请选择往来账户",
            trigger: "change",
          },
        ],
      },
      submitBtn: false,
      productType: [],//产品大类列表
      receiveList: [],//往来账户
    };
  },
  computed: {
    hisList() {
      return this.$store.getters.routerHis;
    },
    path() {
      return this.$route.path;
    },
  },
  mounted() {
    this.getProductType();//产品大类
    this.getCompanyList();//往来账户
    this.getSupplierInfo();//供应商详情
  },
  methods: {
    // 营业职照
    fileFunc(e) {
      console.log(e)
      this.formData.file_list = [e];
    },
    delFileFunc() {
      if(!this.formData.file_list[0].raw){
        this.formData.delete_file =this.formData.file_list[0].file_url;
      }
      this.$nextTick(() => {
        this.formData.file_list = [];
      })
    },
    // ---------------------------供应商详情------------------------------------
    getSupplierInfo() {
      if (!this.$route.query.id) return;
      purchaseApi.getSupplierInfo({
        supplier_id: this.$route.query.id
      }).then(res => {
        console.log(res, "供应商详情")
        if (res.code == 200) {
          this.formData = {
            supplier_name: res.data.supplier_name,
            corporation: res.data.corporation,
            corporation_number: res.data.corporation_number,
            product_type_id: res.data.product_type_id,
            interact_status: res.data.interact_status,
            contacts: res.data.contacts,
            contacts_number: res.data.contacts_number,
            contacts_address: res.data.contacts_address,
            account_id: res.data.account_id,
            supplier_id: res.data.Id,
            social_credit_code: res.data.social_credit_code,
            file_list: res.data.file_url?[{
              file_name: res.data.file_name,
              file_url: res.data.file_url,
              file_suffix: res.data.file_suffix
            }]:[],
            delete_file:''
          }
        }
      })
    },
    // ---------------------------添加供应商------------------------------------
    saveSubmit(formName) {
      let formData = this.formData;
      console.log(formData, "formData")
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let formdata = new FormData();
          let data = {
            supplier_name: formData.supplier_name,
            corporation: formData.corporation,
            corporation_number: formData.corporation_number,
            product_type_id: formData.product_type_id,
            interact_status: formData.interact_status,
            contacts: formData.contacts,
            contacts_number: formData.contacts_number,
            contacts_address: formData.contacts_address,
            account_id: formData.account_id,
            social_credit_code: formData.social_credit_code
          }
          if (formData.supplier_id) {
            data.supplier_id = formData.supplier_id;
            data.delete_file = formData.file_list.length?'':formData.delete_file;//有更新文件就不删除。无文件就删除
            for (let i = 0; i < formData.file_list.length; i++) {
              if (formData.file_list[i].raw) {
                formdata.append('file_list', formData.file_list[i].raw);
              }
            }
            formdata.append('data', JSON.stringify(data));
            this.updateSupplier(formdata)
            return;
          }
          formdata.append('data', JSON.stringify(data));
          for (let i = 0; i < formData.file_list.length; i++) {
            if (formData.file_list[i].raw) {
              formdata.append('file_list', formData.file_list[i].raw);
            }
          }
          this.addSupplier(formdata);
        } else {
          return false;
        }
      });
    },
    // 更新供应商
    updateSupplier(obj) {
      this.submitBtn = true;
      purchaseApi.updateSupplier(obj).then(res => {
        console.log(res, "更新供应商")
        this.submitBtn = false;
        if (res.code == 200) {
          this.cancelFunc();
        }
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message: res.message
        })
      })
    },
    // 添加供应商
    addSupplier(obj) {
      this.submitBtn = true;
      purchaseApi.addSupplier(obj).then(res => {
        console.log(res, "添加供应商")
        this.submitBtn = false;
        if (res.code == 200) {
          this.cancelFunc();
        }
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message: res.message
        })
      })
    },
    // 取消
    cancelFunc() {
      this.$goBackTab(this);
    },
    // ---------------------------产品大类列表------------------------------------
    getProductType() {
      purchaseApi.getProductType({
        page: 1,
        num: 999
      }).then(res => {
        console.log(res, "产品大类列表")
        if (res.code == 200) {
          this.productType = res.data.list;
        }
      })
    },
    // ---------------------------往来账户列表------------------------------------
    getCompanyList() {
      companyApi.getCompanyList({
        page: 1,
        num: 999,
        account_type: 2
      }).then(res => {
        console.log(res, "往来账户列表")
        if (res.code == 200) {
          this.receiveList = res.data.list;
        }
      })
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
@import "@/styles/addPage.scss";
</style>